import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar } from "react-vant";
import "./index.css";
const Index: React.FC = () => {
  const navigate = useNavigate();
  let [changeIndex,setChangeIndex]=useState(0)
  useEffect(()=>{
    setInterval(()=>{
      changeIndex+=1
      setChangeIndex(changeIndex)
      if (changeIndex>=3) {
        changeIndex=0
        setChangeIndex(changeIndex)
      }
    },5000)
  },[])
  return (
    <div className="kswz">
      <div className="wdwz">
        我的<br/>问诊
      </div>
      <div className="top-kswz">
        <NavBar
          title="快速问诊"
          onClickLeft={() => navigate(-1)}
        />
      </div>
      <div className="btn-kswz">
        <div className='btn-kswz-top'>
            <img src="https://kano.guahao.com/ZFy325083470?webp=80"/>
        </div>
        <div className='btn-kswz-btn'>
            <div className='btn-kswz-btn-left'>
                <div><span className='three'>3</span>分钟找到三甲医生</div>
                <div>当前在线接诊医生人数</div>
                <div className='num'>
                  <div>0</div>
                  <div>5</div>
                  <div>0</div>
                  <div>7</div>
                  <div>1</div>
                </div>
            </div>
            <div className='btn-kswz-btn-right'>
              <div className={changeIndex==0 ? 'imgactive' :''}><img src="../../../public/images/1.png"/></div>
              <div className={changeIndex==1 ? 'imgactive' :''}><img src="../../../public/images/2.png"/></div>
              <div className={changeIndex==2 ? 'imgactive' :''}><img src="../../../public/images/3.png"/></div>
              <div className='jt'>&gt;</div>
            </div>
        </div>
      </div>
    </div>
  );
};
export default Index;
